//默认选中 首页
window.addEventListener("DOMContentLoaded",()=>{
    const main = document.querySelector("#main");
    selectCard(main);

    //创建一个广播对象
    const bc = new BroadcastChannel("10000");

    //接受信息
    bc.addEventListener("message" , listerBC);

    // 监听 card-container 的滚轮事件
    const cardContainer = document.querySelector('.card-container');

    cardContainer.addEventListener('wheel', (e) => {
        e.preventDefault(); // 阻止默认的垂直滚动行为
        cardContainer.scrollLeft += e.deltaY; // 将垂直滚动量应用到水平滚动上
    });
})
//处理消息的方法
function listerBC(e){
    //1.判断有没有这个路由
    if(!router[e.data]) {
        console.error(`${e.data} 路由不存在`);
        return;
    }
    //获取路径
    const path = router[e.data] ?? router["#/main"];

    //添加一张卡片
    addCard(titles[e.data]);
}


function closeCard(e) {
    /*
    * 1.默认的事件是 冒泡流
    * 2.点击 x 的时候不一定 能点到 , 向上传递
    *   if(e.target.nodeName === "SPAN")
    * 3.原先传递的参数是this , span 对象 不能阻止冒泡的 ,所以换成event
    * */
    e.stopPropagation();
    const card = e.target.parentElement; //卡片
    const cardContainer = card.parentElement; //面包屑的盒子
    //至少留下一张卡片
    const remainingCards = cardContainer.children; //孩子们
    if(remainingCards.length <= 1){
        return ;
    }
    //cardContainer
    cardContainer.removeChild(card);

    const isSelected = card.classList.contains("selected");

    if(isSelected){
        // selectCard(remainingCards[remainingCards.length -1 ]);
        selectCard(cardContainer.lastElementChild);
    }

}

//新增的函数
function addCard(title) {
    const cardContainer = document.querySelector('.card-container');
    const existingCards = cardContainer.querySelectorAll('.card');
    for (let i = 0; i < existingCards.length; i++) {
        const cardTitle = existingCards[i].querySelector('span').textContent;
        //如果当前的卡片已经存在,则不在添加
        if (cardTitle === title) { //标签已经存在了 , 变成选中的状态
            select(existingCards[i]);
            return;
        }
    }

    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
        <span>${title}</span>
        <span class="close-btn" onclick="closeCard(event)">×</span>
      `;
    // 为新卡片添加点击事件
    card.onclick = function () {
        selectCard(this);
    };
    cardContainer.appendChild(card);

    selectCard(card);
}


function select(card){
    //点击一次下方的代码就执行一次
    if(card.classList.contains("selected")) return;
    // 移除所有卡片的选中状态
    const allCards = document.querySelectorAll('.card');
    allCards.forEach((item) => {
        item.classList.remove('selected');
    });
    // 给当前点击的卡片添加选中状态
    card.classList.add('selected');
}

function selectCard(card) {
    select(card);

    //发送出去
    const bc = new BroadcastChannel("10000");
    bc.postMessage(untitles[card.firstElementChild.innerHTML.trim()]);
}





















